<template>
  <div class="modal-mask">
    <div class="datepicker" @click="blankClick">
      <!-- 数据类型选择 -->
      <div class="datepicker-top" v-if="isShowType">
        <div>数据类型</div>
        <div class="datepicker-topitembar">
          <div v-for="(item, index) in tabArray" :key="index">
            <div
              class="datepicker-topitem"
              :style="tabArrayIndex==index?'color:#58abce;border:0.02rem solid #58abce;':''"
              @click="tabIndexClick(index)"
            >{{item}}</div>
          </div>
        </div>
      </div>
      <!-- 按日、月、年选择 -->
      <van-radio-group
        v-if="isShowDataTab"
        v-model="radioIndex"
        class="radio-group"
        @change="radioClick"
      >
        <van-radio name="1" style="margin-right:0.25rem;">按日选择</van-radio>
        <van-radio name="2" style="margin-right:0.25rem;">按月选择</van-radio>
        <van-radio name="3">按年选择</van-radio>
      </van-radio-group>
      <!-- 开始时间 至 结束时间 -->
      <div class="datepicker-center">
        <div
          class="datepicker-centeritem"
          :style="chooseIndex==0?'border-bottom:1cpx solid #58abce;color:#58abce;':''"
          @click="chooseClick(0)"
        >{{startDate || '开始时间'}}</div>
        <div style="margin:0 0.6rem;">至</div>
        <div
          class="datepicker-centeritem"
          :style="chooseIndex==1?'border-bottom:1cpx solid #58abce;color:#58abce;':''"
          @click="chooseClick(1)"
        >{{endDate || '结束时间'}}</div>
      </div>
      <!-- 日期选择器 -->
      <div style="padding: 0.1rem 0;">
        <!-- 日、月 -->
        <van-datetime-picker
          v-if="radioIndex!=3"
          v-model="currentDate"
          :type="radioIndex==1?'date':'year-month'"
          :item-height="44"
          :show-toolbar="false"
          :min-date="minDate"
          :max-date="maxDate"
          :visible-item-count="3"
          @change="onChange"
        />
        <!-- 年 -->
        <van-picker
          v-else
          :columns="yearList"
          :default-index="yearList.length"
          :visible-item-count="3"
          @change="onChange"
        />
      </div>
      <!-- 取消 确定 -->
      <div class="datepicker-foot">
        <div class="datepicker-btn1" @click="cancelClick">取消</div>
        <div class="datepicker-btn2" @click="confirmClick">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  props: {
    // 1 日， 2 月， 3 年
    dateType: {
      type: String,
      default: "1"
    },

    // 是否显示数据类型
    isShowType: {
      type: Boolean,
      default: true
    },

    // 是否显示日期选择tab
    isShowDataTab: {
      type: Boolean,
      default: true
    },

    // 数据类型选择tabType
    tabType: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      radioIndex: "1",
      tabArray: ["全部", "自营", "代运营", "承包"],
      tabArrayIndex: 0,
      chooseIndex: 0, // 0 开始时间， 1 结束时间
      startDate: api.formatData(
        new Date(Date.parse(new Date) - 24 * 60 * 60 * 1000), "time",
        this.dateType == 2 ? "yyyy-MM" : "yyyy-MM-dd"
      ),
      endDate: "",
      currentDate: new Date(Date.parse(new Date) - 24 * 60 * 60 * 1000),
      minDate: new Date(2016, 0, 1),
      // maxDate: new Date(Date.parse(new Date) - 24 * 60 * 60 * 1000),
      maxDate: new Date(),
      yearList: this.getYear()
    };
  },

  created() {
    this.tabArrayIndex = this.tabType;
    this.radioIndex = this.dateType;
  },

  methods: {
    centerClick() {
      if (this.title) {
        this.$emit("centerClick");
      }
    },

    // 空白事件
    blankClick() {},

    // 类型选择
    tabIndexClick(id) {
      this.tabArrayIndex = id;
    },

    // 选择 日 、 月 、
    radioClick(value) {
      this.radioIndex = value;
    },

    // 选择    0 开始时间 ， 1 结束时间
    chooseClick(value) {
      if (value == 1) {
        if (!this.endDate) {
          this.endDate = this.startDate;
        }
      }
      this.chooseIndex = value;
    },

    // 选择器的数值变化
    onChange(picker) {
      let yearArr = picker.getValues(),
        dateStr = "";
      if (this.radioIndex == 3) {
        // 选择年
        dateStr = yearArr[0];
      } else if (this.radioIndex == 2) {
        // 选择月
        dateStr = yearArr[0] + "-" + yearArr[1];
      } else {
        // 选择日
        dateStr = yearArr[0] + "-" + yearArr[1] + "-" + yearArr[2];
      }
      if (this.chooseIndex == 0) {
        // 开始时间
        this.startDate = dateStr;
      } else {
        // 结束时间
        this.endDate = dateStr;
      }
    },

    // 隐藏日期选择控件
    cancelClick() {
      this.$emit("cancel");
    },

    /**
     * 选择日期->确定
     */
    confirmClick() {
      let index = this.radioIndex,
        startDate = this.startDate,
        endDate = this.endDate; // 1 日、2 月、3 年
      if (endDate) {
        if (
          this.getStrLength(startDate + "") != this.getStrLength(endDate + "")
        ) {
          api.toast("请选择相同格式的日期");
          return;
        }
      }
      this.$emit("confirm", {
        startDate: startDate,
        endDate: endDate ? endDate : "",
        modeIndex: this.tabArrayIndex,
        dataType: index
      });
    },

    // 获取年份
    getYear() {
      let yearList = [];
      for (let i = 2016; i <= new Date().getFullYear(); i++) {
        yearList.push(i);
      }
      return yearList;
    },

    // 获取某个字符在字符串中出现的次数
    getStrLength(value) {
      if (value.indexOf("-") < 0) {
        return 0;
      }
      return value.split("-").length - 1;
    }
  }
};
</script>

<style scoped>
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.datepicker {
  background: #fff;
  border-radius: 0.12rem;
  width: 90%;
  padding-top: 0.2rem;
}

.datepicker-foot {
  display: flex;
  background-color: #fff;
  color: #000;
  align-items: center;
  justify-content: space-between;
  border-top: 0.01rem solid #f4f4f4;
  border-bottom-left-radius: 0.12rem;
  border-bottom-right-radius: 0.12rem;
}

.datepicker-btn1 {
  flex: 1;
  padding: 0.25rem 0.2rem;
  text-align: center;
  font-size: 0.32rem;
  border-right: 0.02rem solid #f4f4f4;
}

.datepicker-btn2 {
  flex: 1;
  padding: 0.25rem 0.2rem;
  text-align: center;
  font-size: 0.32rem;
  color: #3cc51f;
}

.datepicker-top {
  padding: 0.1rem 0.3rem;
  font-size: 0.34rem;
}

.datepicker-topitembar {
  padding: 0.1rem;
  display: flex;
  flex-direction: row;
  margin-top: 0.1rem;
}

.datepicker-topitem {
  border: 0.02rem solid #999;
  width: 1.3rem;
  height: 0.55rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 0.1rem;
  margin-right: 0.2rem;
  font-size: 0.26rem;
}

.radio-group {
  padding: 0.2rem 0;
  font-size: 0.28rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.25rem;
}

.datepicker-center {
  display: flex;
  justify-content: center;
  padding: 0.2rem 0.3rem;
  align-items: center;
  font-size: 0.32rem;
}

.datepicker-centeritem {
  border-bottom: 0.01rem solid #ddd;
  flex: 1;
  text-align: center;
}
</style>